<%@ include file="/common/taglibs.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<head>
	<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<style type="text/css">
.cert {
	line-height: 25px;
	text-decoration: none;
	color: #ffffff;
	font-size:13px;
	background:#6699ff;
	margin-top:1px;
	text-align: center;
}
.cert:hover a{
	background:#eeeeee;
	color:#494949;
	cursor: pointer;
}
.cert:hover {
	background:#eeeeee;
	color:#494949;
	cursor: pointer;
}
.cert a {
	color:#ffffff;
}

.home_title {
	background:#6699ff;
	line-height:28px;
	color:white;
	font-family: bold;
}
.home_title span {
	padding-left:10px;
}
.border {
	border:1px #6699ff solid;
}

.cert_img {
	width:80px;
	height:100px;
	padding-top:0px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:3px;
	border:1px #ddd solid;
}
.fancybox {
	margin-left:5px;
}
.news_td {
	width:400px;
	color:#5b5b5b;
}
.news_td a{
	text-decoration:none;
}
.news_td a:hover{
	color:#ff8000;
}
.news_tr1 {
	height:25px;
	background:#efefef;
	padding-left:5px;
	font-size:12px;
}
.news_tr2 {
	height:25px;
	padding-left:5px;
	font-size:12px;
}

</style>
</head>

<div>
	<div style="height:200px; width:950px;">
	<div style="float:left;width:172px;padding:3px;border:1px #ddd solid;">
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=1"/>"><fmt:message key="World.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=2"/>"><fmt:message key="China.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=3"/>"><fmt:message key="Europe.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=4"/>"><fmt:message key="America.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=5"/>"><fmt:message key="Africa.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=6"/>"><fmt:message key="Asian.cert"/></a></div>
		<div class="cert"><a href="<c:url value="/app/cert/cert?pid=7"/>"><fmt:message key="Australia.cert"/></a></div>
	</div>
	
	<div style="margin-top:1px;float:right;width:760px;height:190px; background:#ddd;">
	image image image
	</div>
	
	</div>
	
	<div style="clear:both;height:250px;">
		<div class="border" style="float:left;width:508px;height:250px;background:#fbfbfb;">
			<div class="home_title">
				<span><fmt:message key="latest.news"/></span>
				<span style="float:right;margin-right:10px"><a href="<c:url value="/app/news/news"/>">more</a></span>
			</div>
			<table id="news" cellspacing="0px" width="100%" style="padding:10px">
			</table>
		</div>
		
		<div class="border" style="float:left;width:210px;margin-left:8px;height:250px;background:#fbfbfb;">
			<div class="home_title">
				<span><fmt:message key="auth.test"/></span>
			</div>
			<div id="cert_img" style="padding:5px;">
				<a class="fancybox" href="<c:url value="/images/cert_img_01.jpg"/>"><img class="cert_img" src='<c:url value="/images/cert_img_01.jpg"/>'/></a>
				<a class="fancybox" href="<c:url value="/images/cert_img_01.jpg"/>"><img class="cert_img" src='<c:url value="/images/cert_img_01.jpg"/>'/></a>
				<a class="fancybox" href="<c:url value="/images/cert_img_01.jpg"/>"><img class="cert_img" src='<c:url value="/images/cert_img_01.jpg"/>'/></a>
				<a class="fancybox" href="<c:url value="/images/cert_img_01.jpg"/>"><img class="cert_img" src='<c:url value="/images/cert_img_01.jpg"/>'/></a>
			</div>
		</div>
		
		<div class="border" style="float:left;width:210px;margin-left:7px; height:250px;background:#fbfbfb;">
			<div class="home_title">
				<span><fmt:message key="certificate.query"/></span>
			</div>
			<div style="width:160px;margin:20px auto;border:1px #ddd solid;padding:10px;">
				<br>
				<p>Emial</p>
				<input/><br><br>
				<p>Other</p>
				<input/>
				<br><br>
				<input type="button" value="Submit"/>
				<br><br>
			</div>
		</div>
	</div>
	
	</div>

<script>
	$(document).ready(function() {
		$(".fancybox").fancybox({
			openEffect	: 'none',
			closeEffect	: 'none'
		});
	});
	getNewsData();
	function getNewsData(){
	 	var passUrl = '<c:url value="/app/news/index.json"/>';
		var passData = '';
		createAjax(passUrl, passData, resetPageData); 
	}
	
	function resetPageData(data) {
		var obj = eval(data);
		var newsList = obj.newsList;
		for (var i = 0; i < newsList.length; i++) {
			if (i%2 == 0) {
				var htm = '<tr class="news_tr1"><td width="20px" align="center">'
						+ '<img src="/images/sidemenu_ico.gif"/></td>'
						+ '<td class="news_td"><a href="/app/news/news?id=' + newsList[i].id + '">'
					+ newsList[i].title + '<a/></td><td>[' + newsList[i].date + ']</td></tr>';
				$('#news').append(htm);
			}else {
				var htm = '<tr class="news_tr2"><td width="20px" align="center">'
					+ '<img src="/images/sidemenu_ico.gif"/></td>'
					+ '<td class="news_td"><a href="/app/news/news?id=' + newsList[i].id + '">'
				+ newsList[i].title + '<a/></td><td>[' + newsList[i].date + ']</td></tr>';
			$('#news').append(htm);
			}
		}
	}
</script>